<template>
  <div>
    <el-dialog title="销账明细" :visible.sync="dialogTableVisible" top="10vh">
      <div style="height:400px;" class="scrollbar">
        <el-scrollbar style="height:100%">
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            show-summary
            :summary-method="getSummaries"
            :data="tableData"
            class="text-sm"
          >
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column
              v-for="(item, index) in tableColumns"
              :key="index"
              :prop="item.prop"
              :label="item.label"
            >
              <template slot-scope="scope">
                <template v-if="item.prop === 'costNameId'">
                  {{ costNameSource[scope.row["costNameId"]] }}
                </template>
                <template v-else>
                  {{ scope.row[item.prop] }}
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </el-dialog>
    <el-link
      icon="el-icon-s-order"
      type="primary"
      :underline="false"
      class="text-lg"
      @click="showTable"
    ></el-link>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      dialogTableVisible: false,
      loading: true,
      tableData: [], // 表格数据
      currency: "", //币种
      totalMoney: "", //总计
      costNameSource: {}, //费用名称
      tableColumns: [
        { prop: "waybillNo", label: "订单号" },
        { prop: "masterNumber", label: "M单号" },
        { prop: "costNameId", label: "费用名称" },
        { prop: "currency", label: "币种" },
        { prop: "offMoney", label: "金额" },
        { prop: "rate", label: "汇率" }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 加载表格数据
    async showTable() {
      this.dialogTableVisible = true;
      let res = await ajax("detail", { id: this.data.id });
      this.tableData = res.financeReceiveDetails;
      this.costNameSource = res.costNameMap;
      this.currency = res.currency;
      this.totalMoney = res.totalMoney;
      this.loading = false;
    },
    // 总计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        switch (column.property) {
          case "currency":
            sums[index] = this.currency;
            break;
          case "offMoney":
            sums[index] = this.totalMoney;
            break;
          default:
            break;
        }
      });
      return sums;
    }
  }
};
</script>
<style scoped>
.el-scrollbar {
  display: flex;
  justify-content: space-around;
  margin-right: -15px;
}
div >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  width: 110%;
  height: 100%;
}
</style>
